探讨前端基于传统的事件驱动到数据驱动开发的发展

整个web前端架构历程发展经历了三个阶段的变革：
1：以JQ等为代表，页面为单位，操作dom为主，多页面开发模型，事件驱动的第一阶段
2：以JQ,requireJS(AMD),seajs(CMD),backbone(基础MVC骨架)，grunt等为代表，以模块为单位，操作dom为主，单页面/多页面为开发模型，具备初步打包，事件驱动的第二阶段
3：以react+redux+reactRouter/vue全家桶/ng，gulp,webpack等为代表，模块，组件为单位,单页面模型为主,具备自动化构建打包，数据驱动为主的第三阶段

三个阶段的说明
从作坊走向工业化，规范化

第一阶段的出现主要解决问题：
1：样式/dom操作的封装
2：ajax封装
3：链式调用 
4：基于JQ生态的插件（有限的扩展）
5：兼容性的封装
随着页面的富客户端普及，用户体验要求提高，缺点也暴露出来:
1：样式与dom的频繁操作，造成浏览器频繁的重绘与回流(重排)，非常影响性能
2：异步的多层回调嵌套，维护与复杂度非常高
3：业务的复杂提高，代码量随着增加，全部变量与函数混淆，混乱，多个功能模块业务混杂，页面很难维护
4：状态难维护，多处响应，无法跟踪状态流程，定位问题
5：一堆依赖添加到页头，具体是哪些功能依赖完全不知道
6：代码量增加，基本是一次性全部加载
7：多页面跨浏览器通信，相应的联动改变，比较困难
8：多人开发多个页面，可能会出现几个页面的JQ的版本都不一致的情况
9：代码手工合并与压缩
开发模式是JSP/APS/PHP嵌套或者tpl模板页面的开发方式


第二阶段的出现主要解决的上一阶段问题：
1：具备闭包的模块化 变量的管理，业务的大的分类，依赖加载的问题
2：依赖的管理，AMC/CMD
3：基础的MVC架构  backbone 拆分业务
4：基础代码合并与压缩 grunt
5：回调嵌套   封装的Promise
6：前端路由   具备可以做SPA开发，backbone里有路由，也出现了第三方独立路由
7：基础打包   grunt
还没有解决的问题：
1：样式与dom的频繁操作，造成浏览器频繁的重绘与回流(重排)，非常影响性能
2：业务复杂度提高，就单模块化还是解决不了细分的业务与冗余代码的增多，只解决了大的分类
3：状态难维护，多处响应，无法跟踪状态流程，定位问题
4：模块化有了，闭包的模块化通信怎么处理
5：自动构建工具
开发模式是前后端分离的开发方式，需要nginx等代理API,node已经影响力前端了(grunt/封装的Promise最初出现也在后端的node)，同时node和浏览器的发展也进入了快速发展期间，兼容性已经不凸显了


第三阶段的出现主要解决的上一阶段问题：
1：内存虚拟dom,diff算法，一次性输出真实dom，解决样式与dom的频繁操作，造成浏览器频繁的重绘与回流(重排)，非常影响性能
2：模块化，组件化（混合，指令，插件）等与前一阶段相比，模块化内部模型固化，组件模型固化，基础规范解决业务复杂度提高，业务细化的各种拆分与管控，代码的规范
3：架构由传统MVC模型转向单向数据流模型或者MVVM，解决业务流更清晰化，状态的可跟踪化，复杂的web交互导致view更新逻辑的爆炸化
4：提供了store数据层，解决SPA单页面模块，组件的通信（其中一种）及数据及状态多模块共享（主要是这个）
5：自动化构建与提供整套系列解决方案，比如vuecli工具 解决开发基础规范，自动化构建，热更新，请求代理，打包压缩，预编译模板页面，SEO预编译静态，发布文件名变化，提交代码巡查等等实现一体化生态

还没有解决的问题：
1：业务增长，多系统需要拆分模块，独立化，微服务化
2：代码增长，编译打包时间过长，增量编译
3：SPA对搜索引擎的索引有很大限制, 目前ssr渲染的解决方案还是显不成熟
4：离线技术

至此前端开发模式翼前后端分离的方式，基于node完成，热更新，代理，编译打包，独立的生态圈已经基本完成



备注：
还有很多没涉及，CSS等，这里只是初步探讨下
基本是所有新概念来源于后端，工业化开发
多页面到单页面，单页面的微服务化  分到合在到分






https://lax.v2ex.com/t/422525





优化：
非业务：代码压缩合并，图片压缩，预加载，按需加载，浏览器缓存，CND, 
需求查询是否合理，查询数据的缓存，http重复请求，
负载均衡，代理URL分解微服务

业务：模块化，组件化，单一数据流